<template>
 <el-container style="height: 100%;">
   <el-aside width="200px">
	  <!-- <ul>
		   <li v-for="(item,index) in permissions" :key="index">
			   {{item.permission}}
		   </li>
	   </ul> -->
	  <el-row class="tac">
	    <el-col :span="24">
	      <el-menu
	        default-active="2"
	        class="el-menu-vertical-demo"
	        >
	        <el-submenu :index="'index'"  v-for="(item,index) in permissions" :key="item._id">
	          <template slot="title">
	            <i class="el-icon-location"></i>
	            <span>{{item.permissionDesc}}</span>
	          </template>
	            <el-menu-item :index="'index-key'" v-for="(child,key) in item.children" :key="child._id"
				@click="pushView(child.permissionDesc)"
				>
				{{child.permissionDesc}}</el-menu-item>
	        </el-submenu>
	      </el-menu>
	    </el-col>
		</el-row>
   </el-aside>
   <el-container>
     <el-header>
		 <div style="width: 100%;height:100%;display: flex;align-items: center;justify-content: flex-end;">
		 	  <el-button icon="el-icon-switch-button" circle type="danger" @click="exit"></el-button>
		 </div>
	 </el-header>
     <el-main>
		 <router-view></router-view>
	 </el-main>
     <el-footer>Footer</el-footer>
   </el-container>
 </el-container>
</template>

<script>
	export default{
		data(){
			return {
				permissions:[]
			}
		},
		methods:{
			exit(){
				
				var exition = ()=>{
					localStorage.clear();
					this.$router.push("/Login");
				}
				this.deleteOpen(exition,"要退出系统管理界面","退出成功");
			},
			pushView(name){
				this.$router.push({name:name})
			}
		},
		created() {
			// console.log(JSON.parse(localStorage.getItem("data")).userInfo._id)
			var permissionData = JSON.parse(localStorage.getItem("data")).permissions
			this.permissions = permissionData.filter((item,index)=>{
			var childArr = permissionData.filter((child)=>{
					return child.parentid == item._id
				})
				// console.log(childArr.length)
				childArr.length>0?item.children = childArr:"";
				return item.parentid == 0;
			})
			this.$store.dispatch("loadAllrole");
			var rs = this.$store.dispatch("loadAllPermission");
			console.log(rs)
			
		}
	}

</script>

<style lang="scss">
	  .el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    line-height: 60px;
	  }
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  
	  .el-container:nth-child(5) .el-aside,
	  .el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	  }
	  
	  .el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	  }
	  #AccountManerge{
	  	display: flex;
	  	flex-direction: row;
	  	width: 100%;
	  	height: 100%;
	  	#btn{
	  		width: 5px;
	  		height: 5px;
	  	}
	  	#tableList{
	  		width:45%;
	  		text-align: center;
	  	}
	  	#addNews{
	  		width:60%;
	  		height:300px;
	  		background: white;
	  		margin-left: 20px;
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
	  		box-shadow:  0 0 15px lightgray;
	  		#addInputBox{
	  			width:70%;
	  			display: flex;
	  			justify-content: center;
	  			align-items: center;
	  			flex-direction: column;
	  		}
	  		#chekBox{
	  			width: 100%;
	  			display: flex;
	  			justify-content:center;
	  			align-items: center;
	  		}
	  	}
	  }
</style>
